<template>
	<om-page :title="pageTitle">
		<view class="video-play">
			<view class="video-play-video">
			    <video id="video" :src="videoUrl" controls></video>
			</view>
			<view class="video-play-tit">{{ videoName }}</view>
			<view class="video-play-des">
				<view>温馨提示：为了保证在线学习真实有效，您在学习过程中将受到如下的功能限制，敬请谅解：</view>
				<view>1、验证通过后，视频不会自动播放，请点击播放按钮以继续播放。</view>
				<view>2、在首次学习时视频进度条不可拖动，学习完成后，如再次观看视频，将不再受此限制。</view>
				<view>3、视频学习过程中将不定时弹出交互窗口，在完成交互后方才记录当前学习时间。</view>
				<view>4、当您视频学习到一半时，如有事需离开，请放心关闭视频，我们将为你记录学习的时间。您再次点击该视频进行学习时，系统自动为你还原至最近的一次交互时间点继续学习。</view>
			</view>
		</view>
	</om-page>
</template>

<script>
	import {
		mapState
	} from 'pinia';
	import {
		useLoginUserStore
	} from '@/stores/login-user.js';
	const app = getApp();
	export default {
		data() {
			return {
				pageTitle:"视频播放",
				videoUrl: '',
				videoName: '',
			}	
		},
		computed: {
			...mapState(useLoginUserStore, ['userId', 'userName'])
		},
		methods: {
			getVideo(id){
				let _that = this;
				_that.om.request('videoRecord/getVideo', {
					formId: id
				},'post').then(res => {
					let obj = res.value.uploadFileData;
					let url = obj.filePath.substring(11);
					_that.videoUrl = getApp().globalData.url+url.replace('\\','/')+'/'+obj.fileSaveName;
					_that.videoName = res.value.videoType+'-第'+res.value.orderNumber+'课  '+res.value.videoName;
				})
			},
		},
		onLoad(e) {
			let _that = this;
			_that.getVideo(e.id);
		},
	};
</script>

<style lang="scss" scoped>
	.video-play{
		.video-play-video{
			#video{
				width: 100%;
			    height: 200px;
			}
			margin-bottom: 20px;
		}
		.video-play-tit{
			padding: 0 15px 15px;
			font-size: 20px;
			font-weight: bold;
		}
		.video-play-des{
			padding: 0 15px 15px;
			font-size: 14px;
		}
	}
</style>                                                                                             